<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="../lib/reset.css">
    <style>
        body {
            background-color: #ccc;
        }
        .img-slider {
            width: 500px;
            height: 200px;
            background-color: #fff;
            margin: 20px auto;
            overflow: hidden;
            position: relative;
        }
        .img-slider li {
            width: 500px;
            height: 200px;
            float: left;
        }
        .img-slider a {
            position: absolute;
            top: 50%;
            left: 0;
            width: 50px;
            height: 50px;
            background-color: #333;
            margin-top: -25px;
            opacity: 0.5;
            filter: alpha(opacity=50);
            display: none;
        }
        .img-slider a.next {
            left: auto;
            right: 0;
        }
        .img-slider:hover a {
            display: block;
        }
    </style>
    <script src="../lib/jquery-3.1.0.js"></script>
    <script>
        $(document).ready(function() {
            var $ul = $('.img-slider > ul'),
                len = $ul.find('li').length,
                width = $ul.find('li').width(),
                ulWidth = len * width;
            $ul.width(ulWidth);
            $('.img-slider > a').on('click', function() {
                var $this = $(this);
                if ( $('ul:animated').length > 0 ) {
                    return;
                }
                if ($this.hasClass('next')) {
                    $ul.animate({marginLeft: -width}, 500, function() {
                        $ul
                            .append($ul.find('li:first'))
                            .css('margin-left', 0);
                    });
                } else {
                    $ul
                        .prepend($ul.find('li:last'))
                        .css('margin-left', -width);
                    $ul.animate({marginLeft: 0}, 500);
                }
            });
        });
    </script>
</head>
<body>

    <div class="img-slider">
        <ul>
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
            <li>item4</li>
            <li>item5</li>
            <li>item6</li>
            <li>item7</li>
        </ul>
        <a href="javascript:;" class="prev"></a>
        <a href="javascript:;" class="next"></a>
    </div>
    
</body>
</html>